<template>
  <div class="home">
    <div>{{msg}}</div>
    <img @click="showMsg" alt="Vue logo" src="../assets/logo.png">
    <div>学生姓名：{{user.name}} 年龄：{{user.age}}</div>
    <div>{{hobby}}</div>
    <button @click="addAge">添加学生的年龄</button>
    <button @click="changeArr">修改数组</button>
  </div>
</template>

<script>

export default {
  name: 'Home',
  data() {
    return {
      msg:'hello vue3',
      user: { name: 'tom' },
      hobby: ['篮球', '足球']
    }
  },
  methods: {
    showMsg() {
      alert(this.msg)
    },
    addAge() {
      // vue3.0解决对象新增属性不能响应的问题
      this.user.age = 18
    },
    changeArr() {
      this.hobby[0] = '羽毛球'
      // 2.0
      // this.hobby.splice(0, 1, '羽毛球')
    }
  }
}
</script>
